<template>
  <div>
    <div class="PersonTop">
      <div class="PersonTop_img">
        <img  :src="byIdData.logo" />
      </div>
      <div class="PersonTop_text">
        <div class="user_text">
          <div class="user_name">
            <span>{{byIdData.rname}}</span>
          </div>
          <div class="user_qianming">
            <span>{{byIdData.sex}}</span>
          </div>
          <div class="user_qianming">
            <span>{{byIdData.vocation}}</span>
          </div>
          <div class="user_anniu">
            <el-button class="el-icon-edit" @click="edit" type="primary" size="medium" plain>编辑</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="person_body">
      <div class="person_body_left">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span class="person_body_list" style="border-bottom: none">个人中心</span>
          </div>
          <el-menu active-text-color="#00c3ff" class="el-menu-vertical-demo">
            <router-link :to="{ path: '/geren', query: { id: byIdData.id } }">
            <el-menu-item
              index="info">
              <i class="el-icon-user"></i>
              <span slot="title">个人简介</span>
            </el-menu-item>
            </router-link>
             <router-link :to="{ path: '/hfb', query: { id: byIdData.id } }">
            <el-menu-item index="myarticle">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">发布房屋</span>
            </el-menu-item>
            </router-link>
            <!-- <el-menu-item
              index="mycollect"
            >
              <i class="el-icon-document"></i>
              <span slot="title">收藏</span>
            </el-menu-item>
            <el-menu-item
              index="myfan"
            >
              <i class="el-icon-tableware"></i>
              <span slot="title">粉丝</span>
            </el-menu-item>
            <el-menu-item
              index="myfollow"
            >
              <i class="el-icon-circle-plus-outline"></i>
              <span slot="title">关注</span>
            </el-menu-item> -->
          </el-menu>
        </el-card>
      </div>
      <div class="person_body_right">
        <router-view url='area'></router-view>
      </div>
    </div>
     <!-- 修改框  -->
     <el-dialog title="修改客户信息" width="50%"   :visible.sync="editbox">
      <el-form >
        <el-form-item  label="客户头像" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="updhandleRemove" :http-request="updcustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 110px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="客户名" >
           <el-input  v-model="updForm.rname"></el-input>
        </el-form-item>
        <!-- <el-form-item label="密码" >
           <el-input type="password"  v-model="updpwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" >
           <el-input type="password"  v-model="qrpwd"></el-input>
        </el-form-item> -->
        <el-form-item label="职业" >
           <el-input  v-model="updForm.vocation"></el-input>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-radio v-model="updForm.sex"  label="男">男</el-radio>
          <el-radio v-model="updForm.sex"  label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="update" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      byIdData:{},
      updForm:{},
      editbox:false,
      editfile:null,
      previewImage:null,
      cdata:{},
      updpwd:'',
      qrpwd:'',
    };
    
  },
  created() {
    document.title="个人中心"
    this.getByidList();
  },
  methods:{
    async update(){
      console.log(this.updForm);

      
      let formData=new FormData();
      formData.append('file',this.editfile);
      formData.append('client',JSON.stringify(this.updForm));
      let ret=await this.$http.put('qiantai/my/update',formData);
      if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
            this.editfile=null;
          this.$refs['mYupload'].clearFiles();
          this.editbox=false;
          this.getByidList();
    },
    edit(){
      this.editbox=true;
      this.updForm=this.byIdData;
      this.previewImage=this.byIdData.logo;
    },
    updhandleRemove(file, fileList) {
      this.editfile=null;
    },
    //获取图片
    updcustomUpload(file){
      this.editfile=file.file;
    },
    async getByidList() {
      // this.id = this.$route.query.id;
      let crea = localStorage.getItem('crea');
      this.cdata=crea = JSON.parse(crea);
      let ret=await this.$http.get(`/qiantai/my/byid/${ this.cdata.id}`);
      this.byIdData = ret.data;
      console.log(this.cdata.id);
    }
  }
}
</script>

<style scoped>
.me-video-player {
  background-color: transparent;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  position: fixed;
  left: 0;
  z-index: 0;
  top: 0;
}
.PersonTop {
  width: 1000px;
  height: 140px;
  padding-top: 20px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  margin-top: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 5px;
}

.PersonTop_img {
  width: 150px;
  height: 120px;
  background-color: #8c939d;
  margin-right: 24px;
  margin-left: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.PersonTop_img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.PersonTop_text {
  height: 120px;
  width: 880px;
  display: flex;
}

.user_text {
  width: 60%;
  height: 100%;
  line-height: 30px;
}

.user_name {
  font-weight: bold;
}
.user-v {
  margin-bottom: -5px;
}
.user-v-img {
  width: 15px;
  height: 15px;
}
.user-v-font {
  font-size: 15px;
  color: #00c3ff;
}
.user_qianming {
  font-size: 14px;
  color: #999;
}

.user_num {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.user_num > div {
  text-align: center;
  border-right: 1px dotted #999;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  line-height: 20px;
}

.num_text {
  color: #999;
}

.num_number {
  font-size: 20px;
  color: #333;
}
.el-menu-item>span {
  font-size: 16px;
  color: #999;
}

/*下面部分样式*/
.person_body {
  width: 1000px;
  margin-top: 210px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

.person_body_left {
  width: 27%;
  height: 600px;
  border-radius: 5px;
  margin-right: 3%;
  text-align: center;
}

.person_body_list {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  font-size: 22px;
  border-bottom: 1px solid #f0f0f0;
  background-image: -webkit-linear-gradient(
    left,
    rgb(42, 134, 141),
    #e9e625dc 20%,
    #3498db 40%,
    #e74c3c 60%,
    #09ff009a 80%,
    rgba(82, 196, 204, 0.281) 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}

.el-menu-item {
  margin-top: 22px;
}

.person_body_right {
  width: 70%;
  /* height: 500px; */
  border-radius: 5px;
  background-color: white;
}

.box-card {
  height: 500px;
}

/*ui样式*/
.el-button {
  width: 84px;
}
</style>
